{extend name="layout/layout" /}


{block name="style"}
	<style>
		body, .mui-content{
			background: #1F4B5F;
			color: #B2B3B4;
		}

		.add-contact{
			text-align: center;
			width: 70px;
			height: 70px;
			position: fixed;
			bottom: 45px;
			right: 20px;
			border-radius: 50%;
			font-size:12px;
			font-weight:400;
			color:rgba(255,255,255,1);
			background:linear-gradient(143deg,rgba(129,95,250,1) 0%,rgba(78,106,240,1) 100%);
			z-index: 99;
			padding: 20px 0;
			line-height: 15px;
		}


		/*添加联系人*/
		.mask{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			background: rgba(0, 0, 0, 0.7);
		}


		.mask .mask-container{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
		}

		.mask .mask-container .title{
			line-height: 40px;
			padding: 0 20px;
			border-bottom: 1px solid #eee;
			color: #272822;
		}

		.mask .mask-container .info{
			padding: 20px;
		}

		.mask .mask-container .add-btn{
			color:rgba(255,255,255,1);
			background:linear-gradient(143deg,rgba(129,95,250,1) 0%,rgba(78,106,240,1) 100%);
			line-height: 40px;
			width: 100%;
			text-align: center;
		}

		.mui-table-view{
			background: none;
		}

		.mui-table-view .mui-table-view-cell:after{
			left: 0;
		}
	</style>
{/block}

{block name="main"}
	<div class="contact" v-cloak>
		<div class="list-box" id="box">
			<div class="box"  v-if="list.length > 0">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell" v-for="item in list">
						{{item.remark}} {{item.mobile}}
						<i class="icon iconfont icon-dianhua text-success mui-pull-right" @tap="callPhone(item.mobile)"></i>
				    </li>
				</ul>
			</div>	

			<div class="no-data" v-else>你还没有添加联系人</div>
		</div>

		

		<div @tap="showMask = true" class="add-contact">添加<br>联系人</div>

		<div class="mask" v-if="showMask" @tap="showMask = false">
			<div class="mask-container" @tap.stop="showMask = true">
				<div class="title">添加联系人</div>
				<div class="info">
					<div class="input-box">
						<input type="text" v-model="username" placeholder="联系人姓名">
					</div>
					<div class="input-box">
						<input type="number" v-model="mobile" placeholder="手机号">
					</div>
				</div>
				<div class="add-btn" @tap="addContact">添加</div>
			</div>
		</div>
	</div>
{/block}
{block name="navbar"}{/block}
{block name="script"}
	<script>
		mui.init({
		  pullRefresh : {
		    container:"#box",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
		      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
		      height:'50px',//可选,默认50px.下拉刷新控件的高度,
		      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
		      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		      auto: false,//可选,默认false.首次加载自动上拉刷新一次
		      callback :function(){
		      	console.log('down');
		      	myVue.getContactList();
		      	// mui('.group-goods').pullRefresh().endPulldown();
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
		  }
		});

		var myVue = new Vue({
			el:'.contact',
			data:{
				showMask: false,
				username: '',
				mobile: '',
				list: []
			},
			mounted: function(){
				if(!token){
					this.login();
				}
				this.getContactList();

			},
			methods: {
				//获取联系人列表
				getContactList: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'contact/index';
					var that = this;
					request(that, {'url': url, 'data': {'page': that.page}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.list = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},	

				//拨打电话
				callPhone: function(mobile){
					var preg = /^1\d{10}$/;
					if(!preg.test(mobile)) {
						mui.toast('手机号码格式不正确');return;
					}


					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'call/dial';
					var that = this;
					request(that, {'url': url, 'data': {'callee': mobile}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.list = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});

				},

				//添加联系人
				addContact: function(){
					var mobile = this.mobile;
					var remark = this.username;

					if(!remark) {
						mui.toast('请输入联系人姓名');return false;
					}

					if(!mobile) {
						mui.toast('请输入手机号');return false;
					}

					var preg = /^1\d{10}$/;
					if(!preg.test(mobile)) {
						mui.toast('手机号码格式不正确'); return false;
					}

					

					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'contact/addEdit';
					var that = this;
					request(that, {'url': url, 'data': {'mobile': mobile, 'remark': remark}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.showMask = false;
						} else {
							mui.toast(res.msg);
						}	
					});

				},

				login:function(){
					location.href = '/mobile/user/login';
				}
			}
		});
	</script>
{/block}